<template>
  <div>
    <base-dialog
      class="file-upload-dialog"
      width="60%"
      :show-default-footer="false"
      :visible.sync="model.visible"
      title="附件列表查看">
      <div v-loading="loading">
        <div class="file-operation">
          <div class="file-operation__left" style="width: 100%;">
            <table border="0" cellspacing="0" style="width: 1000px; text-align: center;">
              <tr>
                <td>序号</td>
                <td>附件分类</td>
                <td>上传数量</td>
                <td>附件列表</td>
                <td>备注</td>
                <td>操作</td>
              </tr>
              <tr>
                <td>1</td>
                <td>产品说明书</td>
                <td>{{ p.fileList1.length }}</td>
                <td>
                  <div v-for="item in p.fileList1 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark1 }}</td>
                <td>
                  <div class="file-operation__right">
                    <el-button
                      type="primary"
                      size="mini"
                      @click.native="openFileDialog(1,p.id1)">上传</el-button>
                  </div></td>
              </tr>
              <tr>
                <td>2</td>
                <td>合格证</td>
                <td>{{ p.fileList2.length }}</td>
                <td>
                  <div v-for="item in p.fileList2 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark2 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(2)">上传</el-button></td>
              </tr>
              <tr>
                <td>3</td>
                <td>维修手册</td>
                <td>{{ p.fileList3.length }}</td>
                <td>
                  <div v-for="item in p.fileList3 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark3 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(3)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>4</td>
                <td>试运行报告</td>
                <td>{{ p.fileList4.length }}</td>
                <td>
                  <div v-for="item in p.fileList4 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark4 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(4)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>5</td>
                <td>备注备件清单</td>
                <td>{{ p.fileList5.length }}</td>
                <td>
                  <div v-for="item in p.fileList5 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark5 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(5)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>6</td>
                <td>装置原理图</td>
                <td>{{ p.fileList6.length }}</td>
                <td>
                  <div v-for="item in p.fileList6 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark6 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(6)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>7</td>
                <td>电气图</td>
                <td>{{ p.fileList7.length }}</td>
                <td>
                  <div v-for="item in p.fileList7 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark7 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(7)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>8</td>
                <td>结构图</td>
                <td>{{ p.fileList8.length }}</td>
                <td>
                  <div v-for="item in p.fileList8 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark8 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(8)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>9</td>
                <td>易损件目录</td>
                <td>{{ p.fileList9.length }}</td>
                <td>
                  <div v-for="item in p.fileList9 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark9 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(9)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>10</td>
                <td>专用工具清单</td>
                <td>{{ p.fileList10.length }}</td>
                <td>
                  <div v-for="item in p.fileList10 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark10 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(10)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>11</td>
                <td>装置改造方</td>
                <td>{{ p.fileList11.length }}</td>
                <td>
                  <div v-for="item in p.fileList11 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark11 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(11)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>12</td>
                <td>数据库结构记录表</td>
                <td>{{ p.fileList12.length }}</td>
                <td>
                  <div v-for="item in p.fileList12 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark12 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(12)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>13</td>
                <td>分析软件</td>
                <td>{{ p.fileList13.length }}</td>
                <td>
                  <div v-for="item in p.fileList13 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>

                <td>{{ p.remark13 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(13)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>14</td>
                <td>硬件驱动程序</td>
                <td>{{ p.fileList14.length }}</td>
                <td>
                  <div v-for="item in p.fileList14 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>

                <td>{{ p.remark14 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(14)">上传</el-button>
                </td>
              </tr>
              <tr>
                <td>15</td>
                <td>仪器仪表清单</td>
                <td>{{ p.fileList15.length }}</td>
                <td>
                  <div v-for="item in p.fileList15 " :key="item.id">
                    <a @click="donwLoadFun(item.filePath, item.fileName)"> {{ item.fileName }} </a>
                    <a class="el-icon-delete" @click="deleteFun(item.id)" />
                  </div>
                </td>
                <td>{{ p.remark15 }}</td>
                <td>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="openFileDialog(15)">上传</el-button>
                </td>
              </tr>
            </table>
            <span slot="footer" class="dialog-footer">
              <el-button style="margin-top: 15px; margin-left: 375px;" size="small" type="primary" @click="model.visible = false">关闭</el-button>
            </span>
          </div>

        </div>
      </div>

    </base-dialog>
    <files :open-file-model="openFileModelData" />
  </div>
</template>
<script>
import { deleteFileProperty, getFiles } from '@/api/bd/components/appendixFiles'
import { getToken } from '@/utils/auth'
import { downloadFile } from '@/utils/public'
import files from './files'
import {
  fileList, fileDelete
} from '@/api/cms/equipment/divceAttr/1CEquipment'
import {
  isImg,
  isPdf,
  isWord,
  isExcel
} from '@/utils/validate'
export default {
  name: 'AppendixFiles',
  components: {
    files
  },
  props: {
    model: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      openFileModelData: {
        title: '',
        visible: false,
        divceId: ''
      },
      active: 0,
      loading: false,
      allFileList: [],
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      data: {
        id: ''
      },
      p: {
        fileList1: [],
        remark1: '',
        fileList2: [],
        remark2: '',
        fileList3: [],
        remark3: '',
        fileList4: [],
        remark4: '',
        fileList5: [],
        remark5: '',
        fileList6: [],
        remark6: '',
        fileList7: [],
        remark7: '',
        fileList8: [],
        remark8: '',
        fileList9: [],
        remark9: '',
        fileList10: [],
        remark10: '',
        fileList11: [],
        remark11: '',
        fileList12: [],
        remark12: '',
        fileList13: [],
        remark13: '',
        fileList14: [],
        remark14: '',
        fileList15: [],
        remark15: ''

      },
      uploadFiles: [], // 当前上次的文件
      uploadTimes: 0 // 当前上传的数量   控制loading效果
    }
  },
  computed: {
  },
  watch: {
  },
  methods: {
    donwLoadFun(url, fileName) {
      var param = {
        url: url,
        fileName: fileName
      }
      downloadFile(param).then((_) => {})
    },
    deleteFun(id) {
      var t = this
      this.confirmBox(`确定删除这个附件吗?`)
        .then(() => {
          fileDelete(id).then(response => {
            t.notifiySuccess('删除成功!')
            t.initPage({ id: t.model.divceId })
          })
        })
        .catch(() => {})
    },
    initPage(data) {
      var param = {
        divceId: data.id
      }
      var t = this
      t.resetFile()
      fileList(param).then(response => {
        var arr = response.data
        t.p.fileList1 = arr.file1
        t.p.fileList2 = arr.file2
        t.p.fileList3 = arr.file3
        t.p.fileList4 = arr.file4
        t.p.fileList5 = arr.file5
        t.p.fileList6 = arr.file6
        t.p.fileList7 = arr.file7
        t.p.fileList8 = arr.file8
        t.p.fileList9 = arr.file9
        t.p.fileList10 = arr.file10
        t.p.fileList11 = arr.file11
        t.p.fileList12 = arr.file12
        t.p.fileList13 = arr.file13
        t.p.fileList14 = arr.file14
        t.p.fileList15 = arr.file15
      })
    },
    resetFile() {
      this.p = {
        id1: '',
        num1: '',
        fileList1: '',
        remark1: '',
        id2: '',
        num2: '',
        fileList2: '',
        remark2: '',

        num3: '',
        fileList3: '',
        remark3: '',

        num4: '',
        fileList4: '',
        remark4: '',

        num5: '',
        fileList5: '',
        remark5: '',

        num6: '',
        fileList6: '',
        remark6: '',

        num7: '',
        fileList7: '',
        remark7: '',

        num8: '',
        fileList8: '',
        remark8: '',

        num9: '',
        fileList9: '',
        remark9: '',

        num10: '',
        fileList10: '',
        remark10: '',

        num11: '',
        fileList11: '',
        remark11: '',

        num12: '',
        fileList12: '',
        remark12: '',

        num13: '',
        fileList13: '',
        remark13: '',

        num14: '',
        fileList14: '',
        remark14: '',

        num15: '',
        fileList15: '',
        remark15: ''
      }
    },
    openFileDialog(fileTypeId, id) {
      this.openFileModelData = {
        title: '',
        visible: true,
        divceId: this.model.divceId,
        id: id,
        fileTypeId: fileTypeId
      }
    },
    fileType(type, fileDta) {
      const url = fileDta.path
      switch (type) {
        case 'img':
          return isImg(url)
        case 'pdf':
          return isPdf(url)
        case 'word':
          return isWord(url)
        case 'excel':
          return isExcel(url)
      }
    },
    getFiles() {
      this.loading = true
      getFiles({ foreignId: this.model.id, property: this.model.property }).then(response => {
        this.loading = false
        this.allFileList = response.data
      }).catch(_ => {
        this.loading = false
      })
    },
    getImgUrl(item) {
      if (this.fileType('img', item)) {
        return this.getUrl(item)
      } else if (this.fileType('pdf', item)) {
        return (require('@/assets/images/preview-pdf.png'))
      } else if (this.fileType('word', item)) {
        return (require('@/assets/images/preview-word.png'))
      } else if (this.fileType('excel', item)) {
        return (require('@/assets/images/preview-excel.png'))
      }
    },
    getUrl(item) {
      return (
        process.env.VUE_APP_BASE_API +
        '/dfile/file/download?fileUrl=' +
        item.path +
        '&access_token=' +
        getToken()
      )
    },
    filterView(image) {
      //  文件为图片才能预览   为excel等类型时 展示的是静态图片 路径中不存在 itps/dfile
      return image.src.includes('itps/dfile')
    },
    preview(item) {
      const url = item.path
      if (isImg(url)) {
        const idx = this.imgList.indexOf(this.getUrl(item))
        this.$refs.viewer.$viewer.view(idx)
      } else if (isPdf(url)) {
        window.open(`${this.publicPath}/pdf/web/viewer.html?file=${encodeURIComponent(this.getUrl(item))}`, '附件预览')
      } else {
        window.open(this.getUrl(item))
      }
    },
    deleteItem(item, index) {
      this.confirmBox('确定删除?').then(() => {
        if (item.id) {
          deleteFileProperty(item.id)
            .then(response => {
              this.notifiySuccess('删除成功!')
              this.allFileList = this.allFileList.filter(
                child => child.id !== item.id
              )
            })
            .catch(() => {})
        } else {
          const idx = this.allFileList.findIndex(child => child.path === item.path)
          this.allFileList.splice(idx, 1)
        }
      })
    },
    beforeUpload(file) {
      this.uploadFiles.push(file)
      this.uploadTimes++
      return true
    },
    uploadProgress(evt, file) {
      console.log(file)
      const idx = this.uploadFiles.findIndex(item => file.uid === item.uid)
      this.uploadFiles.splice(idx, 1, file)
    },
    uploadSuccess(response, file) {
      const idx = this.uploadFiles.findIndex(item => file.uid === item.uid)
      this.uploadFiles.splice(idx, 1)
      this.uploadTimes--
      if (response.status === 200) {
        if (this.uploadTimes === 0) {
          this.getFiles()
          this.notifiySuccess('上传成功')
        }
      } else {
        this.notifiyError(`${file.name}上传失败`)
      }
    },
    uploadError(error, file) {
      const idx = this.uploadFiles.findIndex(item => file.uid === item.uid)
      this.uploadFiles.splice(idx, 1)
      this.uploadTimes--
      if (error) {
        this.notifiyError(`${file.name}上传失败`)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.file-operation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 10px;
  .el-button + .el-button {
    margin-left: 0 !important;
  }
}

.file-content {
  min-height: 300px;
  max-height: calc(80vh - 170px);
  padding: 10px;
  overflow: auto;
  font-size: 0;
  .file-item {
    position: relative;
    display: inline-block;
    width: 20%;
    padding-bottom: 20%;
    cursor: pointer;
  }
  .file-item__content {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #d9dde4;
    border-radius: 5px;
    box-shadow: 0 0 4px 1px #d9dde4;
    .file-item__img {
      width: 100%;
      vertical-align: middle;
    }
    &::after,
    .file-item__modal::after {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    &:hover .file-item__modal {
      opacity: 1;
    }
    .file-item__modal {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 5px;
      opacity: 0;
      transition: opacity 0.3s;
      i {
        font-size: 20px;
        color: #fff;
        cursor: pointer;
      }
      .el-icon-delete, .el-icon-download {
        margin-left: 10px;
      }
    }
  }
}

table td {
  //color: white;
  border: 1px solid #c5c5c5;
}
</style>
